<template>
  <div id="container">
    <div id="app">
      <!-- 在使用组件是,在夹着的地方传入标签 -->
      <!-- 运行后,myslot配合slot位置标签显示页面上 -->
      <MySlot3>
        <!-- 使用template标签配合v-slot或者 #不加冒号  插槽名  包裹要传入对应名字插槽的标签 -->
        <template #header>
          <img src="../assets/logo.png" alt="" />
        </template>
        <template #main>
          <p>Evan You is Vue's dad</p>
          <img src="../assets/111.jpg" alt="" />
        </template>
      </MySlot3>
      <MySlot3>
        <template #header>
          <h2>vue.js</h2>
        </template>
        <template #main>
          <p>Evan You is Vue's dad</p>
          <p>Evan You is Vue's dad</p>
          <p>Evan You is Vue's dad</p>
          <p>Evan You is Vue's dad</p>
          <p>Evan You is Vue's dad</p>
        </template>
      </MySlot3>
    </div>
  </div>
</template>

<script>
import MySlot3 from "../components/MySlot3";
export default {
  components: {
    MySlot3,
  },
};
/* 
组件插槽:
作用:你给他插入什么标签,组件就显示什么标签
使用场景 当组件内某一步分标签不确定的时候 就使用插槽技术
使用
组件内 使用 slot 标签  或是 说是组件 占位
使用组件是   夹着位置传入具体标签
*/
</script>

<style>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
}
</style>